<%@ page import="java.util.Arrays" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>人机大战之成语接龙</title>
	<style>
		h1{
			color:red;
		}
		input{
			psdding: 8px;
			border-radius: 6px;
		}
		.history{
			min-height: 100px;
			border:1px solid gray;
			border-radius:8px;
			padding: 10px;
		}
		form >div:nth-child(2){
			display: flex;
			gap: 10px;
		}
		.msg{
			color:red;
			font-weight: bold;
			margin: 10px 0;
		}
	</style>
</head>
<body><%
	request.setCharacterEncoding("utf-8");
	String cy=request.getParameter("cy");
	String history=request.getParameter("history");
	if (history==null)history="";
//out.print(cy+"\t"+history);
	String msg="";
	String first="";
	boolean isWin=false;
	if(cy!=null){
		cy=cy.trim();
		Class.forName("com.mysql.cj.jdbc.Driver");
		try(Connection cn= DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","12qwas");
			PreparedStatement ps=cn.prepareStatement("select * from chengyu where cy=?")
		) {
			ps.setString(1, cy);
			try (ResultSet rs = ps.executeQuery()) {
				if (rs.next()) {
					history += "," + cy;
					first = cy.substring(cy.length() - 1);

				} else {
					msg = "Sorry，你输入的“" + cy + "”不是成语~";
					first=cy.substring(0,1);
				}
			}
		}
		if (msg.isEmpty()){
			try(Connection cn= DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","12qwas");
				PreparedStatement ps=cn.prepareStatement("select cy from chengyu where first=? order by rand() limit 1")
			) {
				ps.setString(1, first);
				try (ResultSet rs = ps.executeQuery()) {
					if (rs.next()) {
						cy=rs.getString("cy");
						history += "," + cy;
						first = cy.substring(cy.length() - 1);

					} else {
						msg = "恭喜你在成语接龙游戏中战胜了计算机~";
						isWin=true;
					}
				}
			}
		}
	}


%>
<div class='kuang'>
	<h1>人机大战之成语接龙</h1>
	<div class='history'>
		<%
			String[] cys=history.split(",");
			//out.print(Array.toString(cys));
			for(int i=1; i<cys.length;++i){
				out.println("\t\t<p>"+i+".["+(i%2==0?"机":"人")+"]"+cys[i]+"</p>");
			}
		%>

	</div>
	<form method="post" action="">
		<div class='msg'><%=msg%></div>
		<div>
			<input type='text' name='cy'<%=isWin?" disabled":""%> />
			<input type="submit" value='提交' onclick='return check()' <%=isWin?" disabled":""%>/>
			<input type="button" value='重新开始' onclick='again()'/>
			<input type='hidden' name='history' value='<%=history%>' />
		</div>
	</form>
</div>
<script>
	const $=function(selector){
		return document.querySelector(selector)
	}
	function again(){
		location.href=""
	}
	function check(){

		let first='<%=first%>'
		let cy=$('input[name=cy]').value.trim()
// 	if(cy.length<3||cy.length>14){
// 		$('.msg').innerText='成语的长度应该有3~14个汉字~'
// 	    return false
// 	}
// 	if(!cy.startsWith(first)){
// 		$('.msg').innerText='输入的成语必须以“关”字开头~'
// 			return false
// 	}
		try{
			if(cy.length<3||cy.length>14) throw new Error('成语的长度应该有3~14个汉字~')
			if(!cy.startsWith(first)) throw new Error('输入的成语必须以“<%=first%>”字开头~')
			return true
		}catch(e){
			$('.msg').innerText=e.message
			return false
		}
	}
</script>
</body>
</html>